<template>
  <div>
    <CommonCard title="累计订单量" value="2,154,485">
      <template>
        <v-echarts :options="getOptions()" />
        <!-- <div
          id="total-orders-chart"
          :style="{ width: '100%', height: '100%' }"
        /> -->
      </template>
      <template v-slot:footer>
        <span>昨日订单量 </span>
        <span class="emphasis">￥30000000</span>
      </template>
    </CommonCard>
  </div>
</template>

<script>
import commonCardMixin from "../../mixins/commonCardMixin";
export default {
  mixins: [commonCardMixin],
  methods: {
    getOptions() {
      return {
        // x轴
        xAxis: {
          show: false, //隐藏
          type: "category",
          // data:[''] 指定坐标
          boundaryGap: false, //X轴两侧有小小的间距 fasle--极限拉伸 边界 差距
        },
        //  y轴
        yAxis: {
          show: false, // 隐藏
        },
        // 系列 --对应图标
        series: [
          {
            type: "line",
            data: [
              "552",
              "456",
              "452",
              "341",
              "454",
              "451",
              "212",
              "151",
              "452",
              "354",
            ],
            // 区域样式
            areaStyle: {
              color: "purple",
            },
            // 折现样式
            lineStyle: {
              // 折现的宽度
              width: 0,
            },
            itemStyle: {
              opacity: 0, // 折线图圆点隐藏  --  变透明
            },
            smooth: true, // 折线条变的平滑
          },
          {
            type: "line",
            data: [
              "852",
              "556",
              "552",
              "441",
              "554",
              "551",
              "312",
              "251",
              "552",
              "454",
            ],
            // 区域样式
            areaStyle: {
              color: "purple",
            },
            // 折现样式
            lineStyle: {
              // 折现的宽度
              width: 0,
            },
            itemStyle: {
              opacity: 0, // 折线图圆点隐藏  --  变透明
            },
            smooth: true, // 折线条变的平滑
          },
        ],
        //控制表格
        grid: {
          top: 0,
          bottom: 0,
          right: 0,
          left: 0,
        },
      };
    },
  },
};
</script>

<style>
</style>